﻿<script src="~/Scripts/AdminControllers/_ChurchWorkerFamilyController.js"></script>
<div class="col-md-12" ng-controller="ChurchWorkerFamilyController">
    <div class="bg-white bs-0 mb-20 widget">
        <div class="custom-grid-header">
            <div class="custom-grid-name">
                Family Details
            </div>
            <div class="custom-grid-menu">
                <ul class="custom-grid-menu-ul pull-right">
                    <li class="custom-grid-menu-ul-li" ng-click="toggle('add','')">
                        <a href="javascript:;" class="text-white"><i class="fa fa-plus-circle"></i></a>
                    </li>
                    <li class="custom-grid-menu-ul-li dropdown">
                        <a href="javascript:;" class="dropdown-toggle text-white"><i class="zmdi zmdi-sort"></i></a>
                        <ul class="dropdown-menu dropdown-menu-right animated flipInY" style="margin-top: 4px; padding: 0px; width: 220PX;">
                            <li class="sortmenu" ng-click="sortby='DEFAULT';sort()" ng-class="{sortactive:sortby=='DEFAULT'}">
                                <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                <div class="sort-col-2">Default</div>
                                <div class="clearfix"></div>
                            </li>
                            <li class="sortmenu" ng-click="sortby='NAME';sort()" ng-class="{sortactive:sortby=='NAME'}">
                                <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                <div class="sort-col-2">Name</div>
                                <div class="clearfix"></div>
                            </li>
                            <li class="sortmenu" ng-click="sortby='RELATIONSHIP';sort()" ng-class="{sortactive:sortby=='RELATIONSHIP'}">
                                <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                <div class="sort-col-2">Relation Ship</div>
                                <div class="clearfix"></div>
                            </li>
                            <li class="sortmenu" ng-click="sortby='DATEOFBIRTH';sort()" ng-class="{sortactive:sortby=='DATEOFBIRTH'}">
                                <div class="sort-col-1"><i class="zmdi zmdi-sort-by-alpha"></i></div>
                                <div class="sort-col-2">Date Of Birth</div>
                                <div class="clearfix"></div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="widget-body" style="min-height: inherit">
            <div>
                <table class="table table-striped table-bordered">
                    <thead>
                        <th style="width: 20%">Name</th>
                        <th style="width: 20%">Gender</th>
                        <th style="width: 20%">Relationship Name</th>
                        <th style="width: 30%">Date Of Birth</th>
                        <th style="width: 10%">Action&nbsp;</th>
                    </thead>
                    <tbody>
                        <tr ng-repeat="data in list">
                            <td>{{data.Name}}</td>
                            <td><span ng-if="data.Gender==1">Male</span><span ng-if="data.Gender==2">FeMale</span></td>
                            <td>{{data.RelationShip.RelationShipName}}</td>
                            <td>{{data.DateOfBirth}}</td>
                            <td>
                                <div class="btn-group-sm" role="group" aria-label="Second group">
                                    <button type="button" class="btn btn-info waves-effect" ng-click="toggle('edit',data.ChurchWorkerFamilyId);"><i class="fa fa-pencil"></i></button>
                                    <button type="button" class="btn btn-danger waves-effect" ng-click="delete(data.Name,data.ChurchWorkerFamilyId)"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div gridloader></div>
                <div nodata></div>
                <div class="clearfix"></div>
            </div>
            <div ng-show="list.length > 0" style="padding-right: 10px; text-align: right;">
                <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="FamilyDetails" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myAnimationModalLabel">{{title}}</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" ng-model="ChurchWorkerFamilyDetails.Name" maxlength="100" ng-minlength="3" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label>Relationship</label>
                            <select ng-model="ChurchWorkerFamilyDetails.RelationShipId"
                                ng-options="obj.RelationShipId as obj.RelationShipName for obj in relations"
                                class="form-control" ng-required="true" name="relation">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Gender</label>
                            <select ng-model="ChurchWorkerFamilyDetails.Gender" class="form-control" ng-required="true" name="relation" ng-options="obj.Gender as obj.GenderName for obj in Genders">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Date Of Birth</label>
                            <input type="text" class="form-control" calendar ng-model="ChurchWorkerFamilyDetails.DateOfBirth" maxlength="100" ng-minlength="3" ng-required="true">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
